<template>
  <div class="biao2" ref="biao2"></div>
</template>
<script setup>
import { ref, onMounted, watch, computed, nextTick } from "vue";
import * as echarts from "echarts";
let biao2 = ref(null);
onMounted(() => {
  nextTick(() => {
    var myChart = echarts.init(biao2.value);
    let option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "right",
        top: "center",
      },
      series: [
        {
          type: "pie",
          radius: "85%",
          center: ["35%", "50%"],
          data: [
            { value: 108, name: "家政护理", itemStyle: { color: "#3ed59f" } },
            { value: 75, name: "康复理疗", itemStyle: { color: "#fddb78" } },
            { value: 50, name: "上门体检", itemStyle: { color: "#fa746b" } },
          ],
          label: {
            show: false,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    myChart.setOption(option); // 设置图表配置项
  });
});
</script>
<style scoped lang="scss">
.biao2 {
  width: 100%;
  height: 100%;
}
</style>
